<template>
  <!--内容...-->
  <div class="add-card">
    <div class="content">
      <div class="add-card-title">姓名</div>
      <div class="contentUp">
        <div class="name">
          <ul>
            <li>
              <b>电话：</b>
              <i>{{investmentInfo.contactPhone}}</i>
            </li>
            <!-- <li>
              <b>地区：</b
              ><el-cascader
                size="large"
                :options="options"
                v-model="selectedOptions"
              ></el-cascader>
            </li> -->
            <li>
              <b>跟进次数：</b>
              <i>{{investmentTrackingTrackTimes}}</i>
            </li>
            <li>
              <b>跟进时间：</b>
              <i>{{investmentInfo.trackingDate}}</i>
            </li>
            <li><b>关键字：</b><el-input v-model="investmentInfo.keyWord" placeholder="关键字"></el-input></li>
            <li><b>联系人：</b><el-input v-model="investmentInfo.trackingContact" placeholder="联系人"></el-input></li>
            <li>
              <b>沟通形式：</b>
              <select name="" id="" v-model="investmentInfo.communicationType" >
                <option value="" disabled selected>请选择</option>
                <option
                  v-for="item in investmentInfo_communication_type"
                  :key="item.key"
                  :value="item.key"
                  >{{ item.value }}
                </option>
              </select>
            </li>
            <li>
              <b>客户进展：</b>
              <select name="" id="" v-model="investmentInfo.customerProgress" >
                <option value="" disabled selected>请选择</option>
                <option
                  v-for="item in investmentInfo_progress_options"
                  :key="item.key"
                  :value="item.key"
                  >{{ item.value }}
                </option>
              </select>
            </li>
            <li>
              <b>客户类型：</b>
              <select name="" id="" v-model="investmentInfo.customerType">
                <option
                  v-for="item in investmentInfo_type_options"
                  :value="item.key"
                  :key="item.key"
                  >{{ item.value }}
                </option>
              </select>
            </li>
            <li class="text-input-tit">
              <b>沟通内容：</b>
              <textarea class='text-input' name="" id="" cols="30" rows="10" v-model="investmentInfo.communicationContent"></textarea>
            </li>
            <li class="text-input-tit">
              <b>客户备注：</b>
              <textarea class='text-input' name="" id="" cols="30" rows="10" v-model="investmentInfo.customerRemark"></textarea>
            </li>
            <li>
              <b>跟进人：</b>
              <i>{{trackingPeople}}</i>
            </li>
            <li>
              <b >下次跟进时间：</b>
              <input @click="selectDate"  v-model="investmentInfo.nextTrackingDate"></input>
              <calendar :show.sync="show" mode="during" @change="onChange"/>
            </li>
          </ul>
          <div class="submit" @click="submitData">保存</div>
        </div>
      </div>
      <div class="contentDown">
        <div class="contentDownList"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import axios from "axios";
import { regionDataPlus } from "element-china-area-data";
import dayjs from "dayjs";
const DEFAULT_DATE = {
  single: dayjs().add(2, "day"),
  multiple: [dayjs(), dayjs().add(2, "day"), dayjs().add(3, "day")],
  during: [dayjs(), dayjs().add(3, "day")]
};
export default {
  name: "AddTracking",
  components: {},
  props: {
    cardList: {},
    investmentInfo:{}
  },
  data() {
    return {
      //   地区
      options: regionDataPlus,
      selectedOptions: [],
      chinaeduCustomer_option: [],
      chinaeduCustomeValue: "2",
      show: false,
      date: "",
      defaultDate: DEFAULT_DATE.single,
      disabledDate: [dayjs().subtract(2, "day"), dayjs().add(1, "day")],
      investmentTrackingTrackTimes:'',
      investmentInfo_communication_type: [],
      investmentInfo_progress_options:[],
      investmentInfo_type_options: [],
      trackingPeople: Cookies.get("realName"),
      investmentInfo:{},
      addTrackingInfo: {
        investmentInfo: {
        },
        trackingInfo: {}
      } //客户基本信息
    };
  },
  methods: {
    selectDate(mode) {
      this.show = true;
      this.mode = mode;
      this.defaultDate = DEFAULT_DATE[mode];
      this.investmentInfo.nextTrackingDate = "";
    },
    onChange(date) {
      if (this.mode === "single") {
        this.investmentInfo.nextTrackingDate= date.format("YYYY-MM-DD");
      } else {
        this.investmentInfo.nextTrackingDate = JSON.stringify(date.map(item => item.format("YYYY-MM-DD")));
      }
    },
    // 获取下拉
    get_down_list() {
      this.$api.agent.investment_customer_type().then(res => {
        this.chinaeduCustomer_option = res.keyValueList;
      });
      this.$api.agent.investmentTrackingTrackTimes({customerId:this.$route.query.id}).then(res => {
        this.investmentTrackingTrackTimes = res.leastTrackTimes;
      });
      this.investmentInfo_progress_options = JSON.parse(
        localStorage.getItem("investmentCommunicationType")
      );
      this.investmentInfo_progress_options = JSON.parse(
        localStorage.getItem("investmentProgress")
      );
      this.investmentInfo_type_options = JSON.parse(
        localStorage.getItem("investmentType")
      );
    },
    // 查询详情回显数据
    get_customer_info(){

        this.$api.agent
        .investmentQueryAgentIfo({
          customerId: this.$route.query.id
        })
        .then(res => {
          
          res.investmentInfo.communicationType=='6'
          this.investmentInfo = res.investmentInfo;
        });
    },
    // 提交跟进
    submitData(){
      // 网校保存跟进
      let addTrackingInfo = Object.assign({}, this.investmentInfo);
      delete this.investmentInfo.signInfo
      this.addTrackingInfo.trackingInfo = addTrackingInfo;
      this.addTrackingInfo.investmentInfo=this.investmentInfo
      this.addTrackingInfo.trackingInfo.customerId=this.investmentInfo.id
      this.$api.agent
        .investmentTrackingInfoAdd(this.addTrackingInfo).then(res=>{console.log(res)})
    }
    
  },

  mounted() {
    this.get_down_list();
    this.get_customer_info()
    console.log(this.investmentInfo)
  }
};
</script>

<style scoped lang="scss">
ul {
  li {
    list-style: none;
  }
}
.add-card {
  .content {
    .add-card-title{
      color: #333333;
      font-size:0.56rem;
      font-family:MicrosoftYaHei-Bold,MicrosoftYaHei;
      font-weight:bold;
      text-align: left;
      margin-left: 0.4rem;
      margin-bottom: 0.35rem;
    }
    .contentUp {
      .name {
        width:9.2rem;
        margin: 0 auto;
        background:rgba(255,255,255,1);
        box-shadow:0px 3px 8px 0px rgba(204,204,204,0.5);
        border-radius:16px;
        padding-bottom: 0.69rem;
        ul {
          margin: 0 auto;
          padding-left: 0;
          li {
            display: flex;
            flex-direction: row;
            margin-left: 0.53rem;
            margin-right: 0.53rem;
            text-align: left;
            height: 1.06rem;
            line-height: 1.06rem;
            margin-bottom: 0.3rem;
            &.text-input-tit{
              height: 2.41rem;
            }
            i{
              font-style: normal;
              color: #333333;
              font-size:0.35rem;
            }
            > b {
              color: #999999;
              display: block;
              width: 3rem;
              font-size: 0.35rem;
            }
            .text-input{
              width: 6.4rem;
              height: 2.41rem;
              border: 1px solid #dcdfe6;
              border-radius: 4px;
            }
            .el-input {
              width: 6.4rem;
              height: 1.06rem;
              line-height: 1.06rem;
            }
            input{
              width: 6.4rem;
              height: 1.06rem;
              line-height: 1.06rem;
              border: 1px solid #dcdfe6;
              border-radius: 4px;
            }
            
            .el-cascader {
              width: 6.4rem;
              height: 1.06rem;
              line-height: 1.06rem;
            }
            select {
              width: 6.4rem;
              font-family: "微软雅黑";
              background: rgba(0, 0, 0, 0);
              width: 249px;
              height: 1.06rem;
              line-height: 1.06rem;
              color: white;
              text-align: center;
              border: 1px solid #dcdfe6;
              color: #333333;
              padding-left: 5px;
            }
            option {
              color: black;
              background: #a6e1ec;
              line-height: 1.06rem;
            }
            select:focus {
              border: 2px #ddd solid;
            }
            option:hover {
              background: #ebccd1;
            }
          }
        }
        .submit{
          width:8.1rem;
          height:1.2rem;
          line-height: 1.2rem;
          background:linear-gradient(90deg,rgba(87,184,255,1) 0%,rgba(44,130,255,1) 100%);
          border-radius:0.58rem;
          margin: 0 auto;
          color: #fff;
          text-align: center;
          font-size: 0.48rem;
          margin-top: 0.69rem;
          
        }
      }
    }
  }
}
</style>
<style lang="scss"></style>
